<template>
  <div class="swiper-container home-hero-swiper">
    <div class="swiper-wrapper" :style="'transition-duration:'+ swiperDuration +'ms'">
      <div
        class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
        v-for="i in 4" :key="i" 
      >
        <a href="">
          <!-- :src="defaultImg" -->
          <img
            src="../../../assets/imgs/slide1.jpg"
            alt=""
            class="swiper-lazy swiper-lazy-loaded"
          />
        </a>
      </div>
    </div>
    <!-- 底部点点 -->
    <div class="swiper-pagination">
      <a
        class="swiper-pagination-bullet"
        :class="[defaultImg == item.img ? 'selectDot' : '']"
        tabindex="0"
        aria-label="Go to slide 2"
        role="button"
        v-for="(item, i) in slide_List"
        :key="i"
        @click="selectSlide(item.id)"
      ></a>
    </div>
    <!-- 上一个 -->
    <div class="swiper-button-prev" @click="prevImg"></div>
    <!-- 下一个 -->
    <div class="swiper-button-next" @click="nextImg"></div>
  </div>
</template>

<script>
export default {
  name: "LunboImgs",
  data() {
    return {
      slide_List: [
        {
          id: 1,
          img: require("../../../assets/imgs/slide1.jpg"),
        },
        {
          id: 2,
          img: require("../../../assets/imgs/slide2.jpg"),
        },
        {
          id: 3,
          img: require("../../../assets/imgs/slide3.jpg"),
        },
        {
          id: 4,
          img: require("../../../assets/imgs/slide4.jpg"),
        },
        {
          id: 5,
          img: require("../../../assets/imgs/slide5.jpg"),
        },
        {
          id: 6,
          img: require("../../../assets/imgs/slide6.jpg"),
        },
      ],
      defaultImg: require("../../../assets/imgs/slide1.jpg"),
      isActiveClass: false,
      // 图片 的index---ID
      ImgID: 0,
      // 定时器
      timer: null,
      swiperDuration: 0
    };
  },
  created() {
      this.timer = setInterval(() => {
        // console.log('我是一个定时器');
        if (this.ImgID === 5) {
          this.defaultImg = this.slide_List[0].img;
          this.ImgID = -1;
        }
        this.ImgID++;
        // console.log('id: ' + this.ImgID);
        this.defaultImg = this.slide_List[this.ImgID].img;
      }, 5000);
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    // 选择右下角的点点
    selectSlide(i) {
      // console.log(i);
      // 因为我拿到的是数据index，所以要-1，下次换成从0开始的id比较方便点，比较好看
      this.ImgID = i-1;
      this.isActiveClass = true;
      this.defaultImg = this.slide_List[i - 1].img;
    },
    // 上一张
    prevImg() {
      console.log(this.ImgID);
      if (this.ImgID === 0) {
        this.defaultImg = this.slide_List[5].img;
        this.ImgID = 6;
      }
      this.ImgID--;
      this.defaultImg = this.slide_List[this.ImgID].img;
    },
    // 下一张
    nextImg() {
      console.log(this.ImgID);
      if (this.ImgID === 5) {
        this.defaultImg = this.slide_List[0].img;
        this.ImgID = -1;
      }
      this.ImgID++;
      this.defaultImg = this.slide_List[this.ImgID].img;
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: content-box;
  transition-property: transform,-webkit-transform;
  display: flex;
  // .swiper-slide{
  //   transition: 0.4s;
  // }
}
.home-hero-swiper {
  position: relative;
  height: 460px;
  overflow: hidden;
  img {
    display: block;
    width: 1226px;
    height: 460px;
  }
  // 底部的轮播点
  .swiper-pagination {
    position: absolute;
    width: 400px;
    height: 21px;
    left: auto;
    right: 30px;
    bottom: 20px;
    text-align: right;
    z-index: 10;
    transition: opacity 0.3s;
    // background-color: red;
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      border: 2px solid #fff;
      border-color: hsla(0, 0%, 100%, 0.3);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.4);
      opacity: 1;
      outline: none;
      cursor: pointer;
      margin: 0 4px;
      display: inline-block;
    }
    .swiper-pagination-bullet:hover {
      background: hsla(0, 0%, 100%, 0.4);
      border-color: rgba(0, 0, 0, 0.4);
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    left: 0;
    background: url(../../../assets/imgs/icon-slides.png) no-repeat -84px 50%;
    right: auto;
  }
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    margin-top: -35px;
    z-index: 10;
    cursor: pointer;
    outline: none;
    left: 234px;
  }
  .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    margin-top: -35px;
    z-index: 10;
    cursor: pointer;
    outline: none;
    background: url(../../../assets/imgs/icon-slides.png) no-repeat -125px 50%;
    right: 0;
    left: auto;
  }
  .swiper-button-next:hover {
    background-position: -42px 50%;
  }
  .swiper-button-prev:hover {
    background-position: 0 50%;
  }
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.selectDot {
  background: hsla(0, 0%, 100%, 0.4) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
}
</style>